<template>
  <!-- 绑定app账号 -->
  <view class="main">
    <view class="tou_top">
      <image
        style="width: 40rpx; height: 40rpx"
        src="../../images/circle/back.png"
        mode="aspectFill"
        @tap="fanLastPage"
      ></image>
      <text>绑定APP账号</text>
      <text style="width: 40rpx"></text>
    </view>
    <view class="title_">
      <view class="one_"> 请绑定您的一起来往账号 </view>
      <view class="two_"> 绑定APP账号，绑定成功后查看您的APP数据 </view>
    </view>

    <view class="content">
      <view class="phone">
        <input
          :value="phone"
          :maxlength="maxlengthPhone"
          placeholder="请输入手机号码"
          @input="handleInput"
          text="number"
        />
      </view>
      <view class="code">
        <input
          :value="code"
          placeholder="请输入验证码"
          :maxlength="maxlengthCode"
          @input="handleCode"
          text="number"
        />
        <text @tap="getPhoneCode" v-if="ishi">发送验证码</text>
        <text class="right" v-if="!ishi"> 验证码 {{ time }} </text>
      </view>
    </view>
    <view class="sureBtn" @tap="handleBindApp"> 确定 </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      phone: "", //手机号
      code: "", //验证码
      time: 60,
      ishi: true,
      maxlengthPhone: 11,
      maxlengthCode: 6,
    };
  },
  onLoad() {},
  methods: {
    fanLastPage() {
      //返回上一页
      uni.navigateBack({
        delta: 1,
      });
    },
    handleBindApp() {
      //点击保存app
      //手机号验证登录
      if (this.phone == "") {
        uni.showToast({
          title: "请输入手机号",
          duration: 1000,
          icon: "none",
        });
        return;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: "手机号格式有误",
          duration: 1000,
          icon: "none",
        });
        return;
      }
      if (this.code == "") {
        uni.showToast({
          title: "请输入验证码",
          duration: 1000,
          icon: "none",
        });
        return;
      }
      var personal = uni.getStorageSync("personal");
      let token = uni.getStorageSync("token");
      this.request({
        url: "h5/login/bindTelV2",
        method: "post",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          openId: personal.openId,
          telephone: this.phone,
          accessToken: personal.accessToken,
          verificationCode: this.code,
        },
      }).then((res) => {
        this.code = "";
        if (res.data.code == 200) {
          uni.showToast({
            title: "绑定成功",
            duration: 3000,
            icon: "none",
          });
          uni.setStorageSync("token", res.data.data.token); //缓存token
          uni.setStorageSync("personal", res.data.data);
          setTimeout(() => {
            // uni.navigateBack({
            //   delta: 1,
            // });
            uni.redirectTo({
              url: "/pages/index/index?newUserPen=1",
            });
          }, 1000);
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 3000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        }
      });
    },
    getPhoneCode() {
      //点击获取验证
      // console.log(this.phone)
      if (this.phone == "") {
        uni.showToast({
          title: "请输入手机号",
          duration: 1000,
          icon: "none",
        });
        return;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: "手机号格式有误",
          duration: 1000,
          icon: "none",
        });
        return;
      }
      this.ishi = false;
      // 掉获取验证码的接口
      this.request({
        url: "h5/login/verificationCode",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
        },
        data: {
          telPhone: this.phone,
          type: "12",
        },
      }).then((res) => {
        // console.log(res, '验证码')
      });
      var time_ed = setInterval(() => {
        //验证码倒计时处理
        var time = this.time;
        if (time == 0) {
          clearInterval(time_ed);
          this.time = 60;
          this.ishi = true;
        } else {
          time--;
          this.time = time;
        }
      }, 1000);
    },
    handleInput(e) {
      if (e.detail.value && e.detail.value.search(/\D+/g) != -1) {
        e.detail.value = 0;
      }
      e.detail.value = e.detail.value && e.detail.value.replace(/\D+/g, "");
      if (e.detail.value == 0) {
        setTimeout(() => {
          this.maxlengthPhone = -1;
          this.phone = "";
        }, 10);
      }
      if (e.detail.value[0] == 0) {
        setTimeout(() => {
          this.maxlengthPhone = -1;
          this.phone = "";
        }, 10);
      }
      this.phone = e.detail.value;
      this.maxlength = 11;
    },
    handleCode(e) {
      if (e.detail.value && e.detail.value.search(/\D+/g) != -1) {
        e.detail.value = 0;
      }
      e.detail.value = e.detail.value && e.detail.value.replace(/\D+/g, "");
      if (e.detail.value == 0) {
        setTimeout(() => {
          this.maxlengthCode = -1;
          this.code = "";
        }, 10);
      }
      if (e.detail.value[0] == 0) {
        setTimeout(() => {
          this.maxlengthCode = -1;
          this.code = "";
        }, 10);
      }
      this.code = e.detail.value;
      this.maxlength = 6;
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .sureBtn {
    margin: 112rpx auto;
    width: 700rpx;
    height: 80rpx;
    background: #0f6ede;
    border-radius: 8rpx;
    line-height: 80rpx;
    // text-align: center;
    font-size: 30rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
  }

  .content {
    padding: 0 36rpx;

    > view {
      height: 110rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 0.5px solid #ddd;

      input {
        height: 100%;
        font-size: 34rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        // text-align: left;
        color: #111111;
      }

      text {
        font-size: 28rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        // text-align: left;
        color: #0f6ede;
      }
    }
  }

  .title_ {
    padding: 100rpx 36rpx;
    padding-bottom: 50rpx;

    .one_ {
      font-size: 40rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      // font-weight: 500;
      // text-align: left;
      color: #000000;
    }

    .two_ {
      margin-top: 12rpx;
      font-size: 28rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      // text-align: left;
      color: #929292;
    }
  }

  .tou_top {
    align-items: center;
    width: 750rpx;
    height: 106rpx;
    background: #0f6ede;
    padding: 0 31rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    image {
      width: 31rpx;
      height: 31rpx;
    }

    text {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #ffffff;
    }
  }
}
</style>
